<template>
  <div
    class="--card-container"
    :style="`border-radius: ${radius};`"
  >
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    radius: {
      type: String,
      default: '0px'
    }
  }
}
</script>

<style lang="scss" scoped>
.--card-container {
  padding: 10px;
  box-shadow: 0 2px 12px 0 #00000010;
  transition-property: background-color, color;
  transition-duration: $layoutAnimationTime;
  background-color: var(--cardBgColor);
}
</style>
